import React,{ useState } from "react";
import ReactEcharts from "echarts-for-react";
import * as echarts from 'echarts';

const PercentBar = (props) => {
  const data = [];
  data.push(props.TheData)

  let ColorLeft = '#cb00d0'
  let ColorRight = '#7905d8'

  const barWidth = 10

  if (props.TheData < 60) {
    ColorLeft = '#cccb97'
    ColorRight = '#ff9a02'
  }
  const option6 = {
    backgroundColor: 'transparent',
    grid: {
      top: '10%',
      left: '0%',
      right: '10%',
      bottom: '0%',
    },
    xAxis: {
      show: false,
    },
    yAxis: {
      data: data.map((item, index) => `data ${index}`),
      splitLine: {
        show: false,
      },
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: false,
    },
    series: [
      {
        type: 'bar',
        barWidth: barWidth,
        zlevel: 2,
        data: data,
        label: {
          show: true,
          position: 'inside',
          align: 'left',
          formatter: function (params) {
            var percent = params.value + '%';
            return percent;
          },
          color: '#fff',
          fontSize: 10,
        },
        itemStyle: {
          borderRadius: 0,
          color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
            { offset: 0, color: ColorLeft },
            { offset: 1, color: ColorRight },
          ]),
          // color: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
          //     { offset: 0, color: '#cb00d0' },
          //     { offset: 1, color: '#7805d8' },
          // ]),
        },
      },
      {
        type: 'bar',
        barWidth: barWidth,
        barGap: '-100%',
        data: [100],
        itemStyle: {
          borderRadius: 0,
          color: '#545778',
        },
      },
    ],
  };

  const EchartFull = { width:"100%",height:"100%"}

  const [echartsStyle, setEchartsStyle] = useState({ width:"100%"})
  
  setTimeout(() => {
    setEchartsStyle(EchartFull)
  }, 10);

  return (
    <ReactEcharts
      style={echartsStyle}
      option={option6}
      theme={"theme_name"}
    ></ReactEcharts>
  )
}

export default PercentBar